<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
  <!-- <div class="goodsList"> -->
  <div
    class="goodItem"
    @click="$router.push({ path: `/goodInfo/${hmgoodList.id}` })"
  >
    <img :src="hmgoodList.img_url" alt="" class="goodsPic" />
    <p class="title">{{ hmgoodList.title }}</p>
    <div class="itemBottom">
      <p>
        <span>￥{{ hmgoodList.sell_price }}</span>
        <span>
          <del>￥{{ hmgoodList.market_price }}</del>
        </span>
      </p>
      <p>
        <span>热卖中</span>
        <span>剩{{ hmgoodList.stock_quantity }}件</span>
      </p>
    </div>
  </div>
  <!-- </div> -->
</template>


<script>
export default {
  props: {
    hmgoodList: {
      type: Object,
    },
  },
};
</script>


<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style lang='less' scoped>
.goodItem {
  width: 170px;
  margin-top: 5px;
  margin-right: 5px;
  padding: 15px 5px 0 5px;
  // text-align: center;
  border: 2px solid #ccc;
  box-shadow: 0px 4px 10px #ccc;
  .goodsPic {
    height: 100px;
    margin-bottom: 15px;
    padding-left: 30px;
  }
  .itemBottom {
    height: 70px;
    background: #f0f0f0;
    margin: 5px 0px;
    padding-top: 10px;
    p:nth-child(1) span:nth-child(1) {
      font-size: 16px;
      color: red;
      margin-right: 15px;
    }
    p:nth-child(2) {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 15px;
      padding: 0 10px 10px 5px;
    }
  }
}
.title {
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>